<template>
	<view class="log">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">日志明细</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="header">
				<view>类型</view>
				<view class="time">日期</view>
				<view class="number">数量</view>
			</view>
			<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
				<view class="list">
					<view class="item" v-for="item in _this.list">
						<view>{{item.type_name}}</view>
						<!-- <view>AI绘画消耗</view> -->
						<view class="time">{{item.created_at}}</view>
						<view class="number">{{item.value}}</view>
					</view>
					<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		userLog
	} from "@/request/api";
	import {
		ref
	} from "vue";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();

	const getList = async () => {
		let {
			list
		} = await userLog({
			page: _this.page,
			limit: _this.limit,
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
</script>

<style scoped lang="scss">
	.log {
		height: 100vh;
		overflow: hidden;

		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.content {
			.header {
				height: 48rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				view {
					flex: 3;
					line-height: 1;
					color: #999999;
					font-size: 24rpx;

					&.time {
						flex: 5;
					}

					&.number {
						text-align: right;
					}
				}
			}

			.scroll_view {
				height: calc(100vh - 44px - var(--window-top) - 48rpx);

				.list {
					padding: 0 30rpx;
					box-sizing: border-box;

					.item {
						height: 90rpx;
						border-bottom: 1px solid #393940;
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							flex: 3;
							line-height: 1;
							color: #999999;
							font-size: 24rpx;

							&.time {
								flex: 5;
							}

							&.number {
								color: #FFFFFF;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
</style>